<template>
  <div class="image-loader-container">
  <img v-if="allLoaded" class="placeholder" :src="placeholder" alt="">
  <img @load="handleLoader" :src="src" alt="" class="origin" :style="{
    opacity: originOpacity,
    transition: `${duraction}ms`
  }">
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      require: true,
    },
    placeholder: {
      type: String,
      require:true,
    },
    duraction: {
      type: Number,
      default:500,
    }
  },
  data() {
    return {
      originLoaded:false,
      allLoaded:true,
    }
  },
  computed: {
    originOpacity() {
      return this.originLoaded ? 1 : 0;
    }
  },
  methods: {
    handleLoader() {
      this.originLoaded=true;
      setTimeout(() => {
        this.allLoaded=false;
        // 触发事件
      this.$emit("load");
      }, this.duraction);
      
    }
  }
}
</script>

<style lang="less" scoped>
.image-loader-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden
}
@import "~@/styles/mixin.less";
img {
  .self-fill();
  object-fit: cover;
}
.placeholder {
  filter: blur(2vw);
}
</style>